<header id="header" class="app-header navbar" role="menu">
    <!-- navbar header -->
    <div class="navbar-header bg-dark">
        <button class="pull-right visible-xs dk" ui-toggle-class="show" target=".navbar-collapse">
            <i class="glyphicon glyphicon-cog"></i>
        </button>
        <button class="pull-right visible-xs" ui-toggle-class="off-screen" target=".app-aside" ui-scroll="app">
            <i class="glyphicon glyphicon-align-justify"></i>
        </button>
        <!-- brand -->
        <a href="#/" class="navbar-brand text-lt">
            <i class="fa fa-btc"></i>
            <img src="__STATIC__/img/logo.png" alt="." class="hide">
            <span class="hidden-folded m-l-xs">{$Think.config.site-name}</span>
        </a>
        <!-- / brand -->
    </div>
    <!-- / navbar header -->

    <!-- navbar collapse -->
    <div class="collapse pos-rlt navbar-collapse box-shadow bg-white-only">
        <!-- buttons -->
        <div class="nav navbar-nav hidden-xs">
            <a href="#" class="btn no-shadow navbar-btn" ui-toggle-class="app-aside-folded" target=".app">
                <i class="fa fa-dedent fa-fw text"></i>
                <i class="fa fa-indent fa-fw text-active"></i>
            </a>
        </div>
        <!-- / buttons -->

        <!-- link and dropdown -->
        <ul class="nav navbar-nav hidden-sm">
            <li class="dropdown">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                    <i class="fa fa-fw fa-plus visible-xs-inline-block"></i>
                    <span>{$Think.lang.SideBar_SelectLanguage}</span> <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="javascript: changeLanguage('en-US')">English</a></li>
                    <li><a href="javascript: changeLanguage('zh-CN');">中文</a></li>
                </ul>
            </li>
        </ul>
        <!-- / link and dropdown -->

        <!-- nabar right -->
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                    <i class="icon-bell fa-fw"></i>
                    <span class="visible-xs-inline">{$Think.lang.NavBar_Notifications}</span>
                    <span class="badge badge-sm up bg-danger pull-right-xs">{$messages|count}</span>
                </a>
                <!-- dropdown -->
                <div class="dropdown-menu w-xl animated fadeInUp">
                    <div class="panel bg-white">
                        <div class="panel-heading b-light bg-light">
                            <strong>{$Think.lang.NavBar_NotificationsYouHave} <span>{$messages|count}</span> {$Think.lang.NavBar_UnReadNotifications}</strong>
                        </div>
                        <div class="list-group">
                            <volist name="messages" id="messages">
                            <a href class="list-group-item">
                                <span class="clear block m-b-none">
                                    {$messages.title}<br>
                                    <small class="text-muted">{$messages.create_at}</small>
                                </span>
                            </a>
                            </volist>
                        </div>
                    </div>
                </div>
                <!-- / dropdown -->
            </li>
            <li class="dropdown">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="__STATIC__/img/a0.jpg" alt="...">
                <i class="on md b-white bottom"></i>
              </span>
                    <span class="hidden-sm hidden-md">{$user_info.frist_name} {$user_info.last_name}</span> <b class="caret"></b>
                </a>
                <!-- dropdown -->
                <ul class="dropdown-menu animated fadeInRight w">
                    <li class="wrapper b-b m-b-sm bg-light m-t-n-xs">
                        <div>
                            <p>{$Think.lang.Global_LastLoginTime}<br>{$user_info.last_login_time}</p>
                        </div>
                    </li>
                    <li>
                        <a href="/account/profile">
                            <span class="badge bg-danger pull-right">30%</span>
                            <span>{$Think.lang.SideBar_Profile}</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <span class="label bg-info pull-right">new</span>
                            {$Think.lang.Global_Doc}
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="/auth/logout">{$Think.lang.SideBar_LogOut}</a>
                    </li>
                </ul>
                <!-- / dropdown -->
            </li>
        </ul>
        <!-- / navbar right -->
    </div>
    <!-- / navbar collapse -->
</header>